<template>
  <div class="cart">
    <OrderTop />
    <OrderContent />
    <OrderBottom @showCover="bgshow" />
    <div class="cover" v-if="coverShow">
      <div class="cover__content">
        <div class="cover__content__title">确认要离开收银台？</div>
        <div class="cover__content__text">请尽快完成支付，否则将被取消</div>
        <div class="cover__content__btn">
          <div class="cover__content__btn__cancel" @click="handleOrder(true)">
            取消订单
          </div>
          <div class="cover__content__btn__confirm" @click="handleOrder(false)">
            确认支付
          </div>
        </div>
      </div>
    </div>
  </div>
  <Toast v-if="show" :message="toastMessage" />
</template>
<script>
import OrderTop from "./OrderTop.vue";
import OrderContent from "./OrderContent.vue";
import OrderBottom from "./OrderBottom.vue";
import Toast, { useToastEffect } from "../../components/toast/Toast.vue";
import { post } from "../../utils/request";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref } from "vue";
import { getSettleList } from "../../components/cartCommon/commonCartEffect";
const useHandleCancel = (coverShow, cartList) => {
  const route = useRoute();
  const router = useRouter();
  const store = useStore();
  const handleOrder = async (state) => {
    const addressId = 1;
    const shopId = route.params.id;
    const shopName = store.state.cartList[shopId]?.shopName || "";
    const isCanceled = state;
    const products = [];
    for (const i in cartList) {
      if (cartList[i].count > 0) {
        products.push({
          id: cartList[i]._id,
          num: Number(cartList[i].count),
        });
      }
    }
    try {
      const result = await post("api/order", {
        addressId,
        shopId,
        shopName,
        isCanceled,
        products,
      });
      if (result.data.errno === 0) {
        router.push("/orderList");
        coverShow.value = false;
        store.commit("clearCart", shopId);
      } else {
        alert("提交订单失败");
        coverShow.value = false;
      }
    } catch (e) {
      alert("提交失败");
    }
  };
  return { handleOrder };
};
const showCover = (coverShow, ToastShow) => {
  const route = useRoute();
  const isAddress = route.query.addressId;
  const bgshow = () => {
    if (isAddress) {
      coverShow.value = true;
    } else {
      ToastShow("请先选择地址");
    }
  };
  return { bgshow };
};
export default {
  name: "orderConfirmation",
  components: { OrderTop, OrderContent, OrderBottom, Toast },
  setup() {
    const { cartList } = getSettleList();
    const { ToastShow, toastMessage, show } = useToastEffect();
    const coverShow = ref(false);
    const { bgshow } = showCover(coverShow, ToastShow);
    const { handleOrder } = useHandleCancel(coverShow, cartList);
    return { handleOrder, coverShow, bgshow, toastMessage, show };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables";
.cart {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #f8f8f8;
}
.cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  &__content {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: $color-fff;
    width: 3rem;
    height: 1.57rem;
    transform: translate(-50%, -50%);
    border-radius: 0.04rem;
    box-sizing: border-box;
    padding: 0.24rem 0;
    &__title {
      text-align: center;
      font-size: 0.18rem;
      line-height: 0.25rem;
      color: #333;
      font-weight: 600;
    }
    &__text {
      margin-top: 0.08rem;
      text-align: center;
      font-size: 0.14rem;
      color: #666;
      line-height: 0.2rem;
    }
    &__btn {
      display: flex;
      margin-top: 0.24rem;
      padding: 0 0.59rem;
      font-size: 0.14rem;
      &__cancel,
      &__confirm {
        width: 0.8rem;
        height: 0.32rem;
        border-radius: 0.16rem;
        line-height: 0.32rem;
        text-align: center;
      }
      &__cancel {
        border: 0.01rem solid #0091ff;
        color: #0091ff;
        margin-right: 0.24rem;
      }
      &__confirm {
        background-color: #4fb0f9;
        color: $color-fff;
      }
    }
  }
}
</style>